{extend name="common/base"/}

{block name="style"}
<style type="text/css">
  .clearfix {
    display: block;
  }

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  * html .clearfix {
    height: 0.1%;
  }

  .panel-right {
    border-bottom: 1px solid #e8e8e8;
    padding: 0 20px 20px;
  }

  .panel-num table {
    width: 100%;
  }

  .panel-num td {
    text-align: center;
    padding: 20px 0;
    width: 16.6%;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee
  }

  .panel-num .num-title {
    padding-bottom: 10px;
    color: #999;
  }

  .panel-num .num-num {
    font-size: 28px;
    font-weight: 300;
    color: #009688;
  }

  .latest-news {
    padding-top: 12px;
    padding-bottom: 30px;
    position: relative;
  }

  .latest-news .layui-timeline-title {
    padding-bottom: 0;
  }

  .latest-news .layui-timeline-item {
    padding-bottom: 1px;
  }

  .layui-timeline-title span {
    color: #999
  }

  .panel-more {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(rgba(225, 225, 225, 0), rgba(225, 225, 225, .8));
  }

  .panel-more a {
    color: #0088FF
  }

  .index-row {
    margin-right: 351px;
  }

  .panel {
    padding: 0 20px;
    background-color: #fff;
  }

  .panel-title {
    font-size: 18px;
    font-weight: 800;
    padding: 20px 0 15px;
  }

  .table-title {
    font-size: 18px;
    font-weight: 800;
    padding: 20px 0 5px;
  }

  .row-right {
    width: 350px;
    float: right;
    border-left: 1px solid #e8e8e8;
    background-color: #f7f7f7;
  }
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div style="background-color: #fff;">
  <div class="row-right">
    <div class="panel-right">
      <div class="table-title">最新动态</div>
      <div class="latest-news">
        <ul class="layui-timeline" id="logs">
        </ul>
        <div class="panel-more"><a href="/admin/api/log_list/">查看更多动态</a></div>
      </div>
    </div>
    <div class="panel-right">
      <div class="table-title">系统信息</div>
      <table class="layui-table" lay-skin="" lay-size="sm">
        {if condition="($install == true)"}
        <tr>
          <td colspan="2" style="color: #E94335;">提醒：发现app目录下的install文件夹没删除，为了系统的安全,请手动去删除。</td>
        </tr>
        {/if}
        <tr>
          <td><b>服务器系统</b></td>
          <td>{:get_system_info('os')}</td>
        </tr>
        <tr>
          <td><b>PHP版本</b></td>
          <td>{:get_system_info('php')}</td>
        </tr>
        <tr>
          <td><b>系统版本</b></td>
          <td>{:CMS_VERSION}</td>
        </tr>
        <tr>
          <td><b>ThinkPHP版本</b></td>
          <td>{:TP_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:20px"
              href="https://www.kancloud.cn/manual/thinkphp6_0" target="_blank">TP6文档</a></td>
        </tr>
        <tr>
          <td><b>Layui版本</b></td>
          <td>{:LAYUI_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:20px" href="https://www.layui.com/doc/"
              target="_blank">Layui文档</a></td>
        </tr>
        <tr>
          <td><b>上传附件限制</b></td>
          <td>{:get_system_info('upload_max_filesize')}</td>
        </tr>
        <tr>
          <td><b>执行时间限制</b></td>
          <td>{:get_system_info('max_execution_time')}</td>
        </tr>
        <tr>
          <td><b>BUG反馈</b></td>
          <td><a href="mailto:hdm58@qq.com" target="_blank">hdm58@qq.com</a></td>
        </tr>
      </table>
    </div>
  </div>


  <div class="index-row">
    <div class="panel-num">
      <table>
        <tr>
          <td>
            <div class="num-title">系统用户</div>
            <div class="num-num">{$adminCount}</div>
          </td>
          <td>
            <div class="num-title">注册用户</div>
            <div class="num-num">{$userCount}</div>
          </td>
          <td>
            <div class="num-title">文章</div>
            <div class="num-num">{$articleCount}</div>
          </td>
          <td>
            <div class="num-title">图片</div>
            <div class="num-num">0</div>
          </td>
          <td>
            <div class="num-title">产品</div>
            <div class="num-num">0</div>
          </td>
        </tr>
      </table>
    </div>
    <div class="panel">
      <div class="table-title">注册用户</div>
      <table id="UserList" class="layui-table layui-table-view">
		<thead>
		<tr>
			<th>用户名</th>
			<th>头像</th>
			<th>登录次数</th>
			<th>最后登录时间</th>
		</tr>
		</thead>
	  </table>
      <div style="clear: left;"></div>
    </div>
    <div class="panel">
      <div class="table-title">文章列表</div>
      <table id="Article" class="layui-table layui-table-view">
		<thead>
		<tr>
			<th>文章标题</th>
			<th>文章分类</th>
			<th>发布时间</th>
		</tr>
		</thead>
	  </table>
      <div style="clear: left;"></div>
    </div>
    <div class="panel">
        <div class="table-title">访问统计</div>
        <div id="chartView" style="width: 100%;height:396px;"></div>
    </div>
  </div>
  <div style="clear: right;"></div>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<script>
  function getLogs() {
    $.ajax({
      url: "/admin/api/get_log_list",
      type: 'post',
      data: {
        page: 1,
        limit: 10
      },
      success: function (e) {
        if (e.code == 0) {
          var html = '';
          $.each(e.data, function (key, value) {
            html += '<li class="layui-timeline-item">\
										<i class="layui-icon layui-timeline-axis"></i>\
										<div class="layui-timeline-content layui-text">\
										  <div class="layui-timeline-title"><span title="'+value.id+'">'+ value.times + '</span>，' + value.content + '</div>\
										</div>\
									  </li>';
          });
          $('#logs').html(html);
        }
      }
    })
  }
  
  function getUsers() {
    $.ajax({
      url: "/admin/api/get_user_list",
      type: 'post',
      success: function (e) {
        if (e.code == 0) {
          var html = '';
		  if(e.data.length==0){
			html +='<tr>\
				<td colspan="4" style="padding:10px 0; color:#999; text-align:center;">暂无用户</td>\
			</tr>';
		  }
		  else{
			  $.each(e.data, function (key, value) {
				html += '<tr>\
						<td>'+value.username+'</td>\
						<td>\
						 <img src="' + value.headimgurl + '" width="20" height="20" />\
						</td>\
						<td>'+value.login_num+'</td>\
						<td>'+value.last_login_time+'</td>\
					  </tr>';
			  });
		  }
          $('#UserList').append(html);
        }
      }
    })
  }
  
  function getArticles() {
    $.ajax({
      url: "/admin/api/get_article_list",
      type: 'post',
      success: function (e) {
        if (e.code == 0) {
          var html = '';
		  if(e.data.length==0){
			html +='<tr>\
				<td colspan="3" style="padding:10px 0; color:#999; text-align:center;">暂无文章</td>\
			</tr>';
		  }
		  else{
			  $.each(e.data, function (key, value) {
				html += '<tr>\
						<td>'+value.title+'</td>\
						<td>' + value.cate_title + '</td>\
						<td>'+value.create_time+'</td>\
					  </tr>';
			  });
		  }
          $('#Article').append(html);
        }
      }
    })
  }

var echartsTheme={color:["#1AAD19","#1890FF","#5FB878","#FFB980","#D87A80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"],title:{textStyle:{fontWeight:"normal",color:"#666"}},dataRange:{itemWidth:15,color:["#009688","#e0ffff"]},toolbox:{color:["#1e90ff","#1e90ff","#1e90ff","#1e90ff"],effectiveColor:"#ff4500"},tooltip:{axisPointer:{type:"line",lineStyle:{color:"#999"},crossStyle:{color:"#008acd"},shadowStyle:{color:"rgba(200,200,200,0.2)"}}},dataZoom:{dataBackgroundColor:"#efefff",fillerColor:"rgba(182,162,222,0.2)",handleColor:"#008acd"},grid:{borderColor:"#eee"},categoryAxis:{axisLine:{lineStyle:{color:"#555555"}},axisTick:{show:!1},splitLine:{lineStyle:{color:["#eee"]}}},valueAxis:{axisLine:{lineStyle:{color:"#555555"}},splitArea:{show:!0,areaStyle:{color:["rgba(250,250,250,0.1)","rgba(200,200,200,0.1)"]}},splitLine:{lineStyle:{color:["#eee"]}}},polar:{axisLine:{lineStyle:{color:"#ddd"}},splitArea:{show:!0,areaStyle:{color:["rgba(250,250,250,0.2)","rgba(200,200,200,0.2)"]}},splitLine:{lineStyle:{color:"#ddd"}}},timeline:{lineStyle:{color:"#009688"},controlStyle:{normal:{color:"#009688"},emphasis:{color:"#009688"}},symbol:"emptyCircle",symbolSize:3},bar:{itemStyle:{normal:{barBorderRadius:2},emphasis:{barBorderRadius:2}}},line:{smooth:!0,symbol:"emptyCircle",symbolSize:8},k:{itemStyle:{normal:{color:"#d87a80",color0:"#2ec7c9",lineStyle:{color:"#d87a80",color0:"#2ec7c9"}}}},scatter:{symbol:"circle",symbolSize:4},radar:{symbol:"emptyCircle",symbolSize:3},map:{itemStyle:{normal:{areaStyle:{color:"#ddd"},label:{textStyle:{color:"#d87a80"}}},emphasis:{areaStyle:{color:"#fe994e"}}}},force:{itemStyle:{normal:{linkStyle:{color:"#1e90ff"}}}},chord:{itemStyle:{normal:{borderWidth:1,borderColor:"rgba(128, 128, 128, 0.5)",chordStyle:{lineStyle:{color:"rgba(128, 128, 128, 0.5)"}}},emphasis:{borderWidth:1,borderColor:"rgba(128, 128, 128, 0.5)",chordStyle:{lineStyle:{color:"rgba(128, 128, 128, 0.5)"}}}}},gauge:{axisLine:{lineStyle:{color:[[.2,"#2ec7c9"],[.8,"#5ab1ef"],[1,"#d87a80"]],width:10}},axisTick:{splitNumber:10,length:15,lineStyle:{color:"auto"}},splitLine:{length:22,lineStyle:{color:"auto"}},pointer:{width:5}},textStyle:{fontFamily:"微软雅黑, Arial, Verdana, sans-serif"}};  
function setHour(num){
  var str= num+':00';
  if(num<10){
    str='0'+num+':00';
  }
  return str;
}
var chartView = echarts.init(document.getElementById('chartView'),echartsTheme);
function get_view_data() {
$.ajax({
  url: "/admin/api/get_view_data",
  type: 'post',
  data: {},
  success: function (e) {
    if (e.code == 0) {
      var data_first = e.data.data_first;
      var data_second = e.data.data_second;
      var myDate = new Date();
      var nowHour = myDate.getHours(); //获取当前小时数(0-23)
      var xData=[];
      var yData1=[];
      var yData2=[];
      $.each(data_first, function (key, value) {
        if(key<=nowHour){
          yData1.push(value);
        }
      });
      $.each(data_second, function (key, value) {
        xData.push(setHour(key));
        yData2.push(value);
      });
      var ops= {
        color:["#1AAD19","#1890FF"],
        grid: {
          left: '10px',
          right: '20px',
          bottom: '20px',
          top: '60px',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          show: true,
        },
        legend: {
            data: ["今日", "昨日"]
        },
        xAxis: [{
            type: "category",
            boundaryGap: !1,
            data: xData
        }],
        yAxis: [{
            type: "value"
        }],
        series: [{
            name: "今日",
            type: "line",
            smooth: !0,
            itemStyle: {
                normal: {
                    areaStyle: {
                        type: "default",
                        opacity:0.2
                    }
                }
            },
            data: yData1
        }, {
            name: "昨日",
            type: "line",
            smooth: !0,
            itemStyle: {
                normal: {
                    areaStyle: {
                        type: "default",
                        opacity:0.2
                    }
                }
            },
            data: yData2
        }]
    }
    chartView.setOption(ops);
      setTimeout(function() {
          window.onresize = function() {
            chartView.resize();
          }
      })
      console.log(e.data);
    }
  }
})
}


  function init(layui) {
    var layer = layui.layer, table = layui.table;
    getLogs();
	getUsers();
	getArticles();
	get_view_data();
  } 
</script>
{include file="common/layui" base="base" extend="[]" callback="init" /}
{/block}
<!-- /脚本 -->